<template>
  <div class="main">
    <el-card class="box-card">
      <div class="header"></div>
      <div class="content">
        <div class="content-table">
          <el-table :data="tableData" border>
            <el-table-column label="ID" prop="id" sortable></el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="昵称" prop="nickname"></el-table-column>
            <el-table-column label="性别" prop="sex"></el-table-column>
            <el-table-column label="余额" prop="balance"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {userList} from "@/http/api/admin";
import response from "@/http/response";

export default {
  name: "UserData",
  data() {
    return {
      tableData: [],
    }
  },
  methods: {

  },
  // 挂载时自动执行
  async mounted() {

    // 加载用户列表
    let result = await userList()
    if (result.code === response.success) {
      let data = result.data
      // 性别转换
      for(let i = 0; i < data.length; i ++) {
        data[i].sex = (data[i].sex === '1') ? '男' : '女'
      }
      this.tableData = data
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  .box-card {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 0 100px;
    .header {}
    .content {
      width: 70%;
      margin: 0 auto;
    }
  }
}
</style>